<template>
  <div class="container">
    <a-card class="general-card" :title="$route.meta.locale">
      <table-search
        :fileds="searchFileds"
        @search="search"
        @reset="search"
      ></table-search>
      <xTable
        v-model:refresh="refresh"
        v-model:selected-keys="selectedKeys"
        :params="params"
        :columns="tableColumns"
        row-key="userId"
        :http="{
          list: allocatedUserList,
          closed: () => {
            router.back();
          },
        }"
      >
        <template #operation-default>
          <div class="item">
            <a-button type="outline" @click="openSelectUser">
              添加用户
            </a-button>
          </div>
          <div class="item">
            <a-button
              type="outline"
              status="danger"
              :disabled="selectedKeys.length <= 0"
              @click="cancelAll(selectedKeys)"
            >
              批量取消授权
            </a-button>
          </div>
        </template>
        <template #status="{ row }">
          <dict-tag :options="dict.sys_normal_disable" :value="row.status" />
        </template>
        <template #optional="{ row }">
          <a-button type="text" status="danger" @click="cancel(row)">
            取消授权
          </a-button>
        </template>
      </xTable>
    </a-card>
    <selsctUser
      ref="users"
      :params="{ roleId: route.params.roleId }"
      @reload="refresh = true"
    ></selsctUser>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { addDateRange } from '@/utils/index';
  import {
    authUserCancel,
    authUserCancelAll,
    allocatedUserList,
  } from '@/api/system/role';
  import { Message, Modal } from '@arco-design/web-vue';
  import { getDict } from '@/utils/dict';
  import selsctUser from './components/select-user.vue';

  const route = useRoute();
  const router = useRouter();
  const users = ref();
  const dict = getDict('sys_normal_disable');
  const selectedKeys = ref([]);
  const searchFileds = reactive([
    {
      span: 5,
      field: 'userName',
      placeholder: '请输入用户名称',
      label: '用户名称',
      tag: 'a-input',
      initValue: '',
    },
    {
      span: 5,
      field: 'phonenumber',
      placeholder: '请输入手机号码',
      label: '手机号码',
      tag: 'a-input',
      initValue: '',
    },
  ]);
  const tableColumns = reactive([
    {
      title: '用户名称',
      dataIndex: 'userName',
    },
    {
      title: '用户昵称',
      dataIndex: 'nickName',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
    },
    {
      title: '手机',
      dataIndex: 'phonenumber',
    },
    {
      title: '状态',
      dataIndex: 'status',
      slotName: 'status',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      dataIndex: 'optional',
      slotName: 'optional',
    },
  ]);
  const refresh = ref(true);
  const params = ref({
    roleId: route.params.roleId,
  });

  const search = (data: { roleId: string | string[]; dateRange: any[] }) => {
    data.roleId = route.params.roleId;
    params.value = addDateRange(data, data?.dateRange);
    refresh.value = true;
  };

  const cancel = (row: { userName: any; userId: any }) => {
    Modal.info({
      title: '提示',
      content: `确定取消该用户“${row.userName}”的角色吗？`,
      hideCancel: false,
      onOk: () => {
        authUserCancel({
          roleId: route.params.roleId,
          userId: row.userId,
        }).then(({ code, msg }) => {
          refresh.value = true;
          if (code !== 200) {
            Message.warning(msg);
          }
        });
      },
    });
  };
  const cancelAll = (keys: any[]) => {
    Modal.info({
      title: '提示',
      content: `是否取消选中用户授权数据项？`,
      hideCancel: false,
      onOk: () => {
        authUserCancelAll({
          roleId: route.params.roleId,
          userIds: keys.join(','),
        }).then(({ code, msg }) => {
          refresh.value = true;
          if (code !== 200) {
            Message.warning(msg);
          }
          selectedKeys.value = [];
        });
      },
    });
  };

  const openSelectUser = () => {
    users.value.show();
  };
</script>

<style scoped lang="less">
  .operation-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
    .item {
      margin-left: 8px;
    }
  }
  .container {
    // padding: 0 20px 20px 20px;
  }
  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
</style>
